<template>
  <div class="pageMenuWrapper">
    <menu-dialog v-model="dialogVisible" :parent-id="parentId" @change="freshTree"/>
    <el-row :gutter="16">
      <el-col :span="13">
        <el-card class="card">
          <div slot="header">
            <xum-title :title-span="6" title="系统菜单" class="menuTitle">
              <el-button type="text" :loading="queryLoading" @click="handleRefreshTree"
                  :disabled="queryLoading">刷新</el-button>
              <el-button type="text" @click="handleAddRootNode">添加根节点</el-button>
            </xum-title>
          </div>
          <el-scrollbar style="height: 500px">
            <el-tree :data="treeData" :props=" { children: 'list', label: 'menuName' }" ref="tree"
                     @node-click="handleNodeClick" v-loading="queryLoading" :expand-on-click-node="false"
                     @current-change="currentChange" :check-on-click-node="true">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span>
                  <el-button type="text" size="mini"  @click="() => addSonNode(data)">
                    添加节点
                  </el-button>
                  <el-button type="text" style="color: red" size="mini" @click="() => removeNode(node, data)">
                    移除节点
                  </el-button>
                </span>
              </span>
            </el-tree>
          </el-scrollbar>
        </el-card>
      </el-col>
      <el-col :span="11">
        <el-card class="card">
          <div slot="header">
            <xum-title title="节点设置" style="margin-bottom: 0;"/>
          </div>
          <el-scrollbar style="height: 500px">
            <el-form ref="form" :model="selectNode" size="small" label-width="80px" class="form" :rules="formRuler">
              <el-form-item prop="menuId" label="菜单编号">
                <el-input v-model="selectNode.menuId" placeholder="菜单编号" :disabled="true"/>
              </el-form-item>
              <el-form-item prop="menuCode" label="菜单编码">
                <el-input v-model="selectNode.menuCode" placeholder="菜单编码" :disabled="true"/>
              </el-form-item>
              <el-form-item prop="menuName" label="菜单名称">
                <el-input v-model="selectNode.menuName" placeholder="菜单名称"/>
              </el-form-item>
              <el-form-item prop="menuIcon" label="菜单图标">
                <el-input v-model="selectNode.menuIcon" placeholder="菜单图标"/>
              </el-form-item>
              <el-form-item prop="menuUrl" label="菜单链接">
                <el-input v-model="selectNode.menuUrl" placeholder="菜单链接"/>
              </el-form-item>
              <el-form-item prop="menuOrder" label="菜单排序">
                <el-input v-model="selectNode.menuOrder" placeholder="菜单排序"/>
              </el-form-item>
              <el-form-item prop="menuDesc" label="菜单描述">
                <el-input v-model="selectNode.menuDesc" placeholder="菜单描述"/>
              </el-form-item>
              <el-row :gutter="40">
                <!--suppress HtmlDeprecatedAttribute -->
                <el-col :span="24" align="right">
                  <el-button @click="handleChangeGoodGroup" type="primary" :disabled="!isSelect"
                             :loading="submitLoading" size="small">更新</el-button>
                </el-col>
              </el-row>
            </el-form>
          </el-scrollbar>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ResultCode } from '@/constants/constants'
import XumTitle from '@/components/XumTitle'
import MenuDialog from '@pages/resource/part/pageMenu/MenuDialog'
import { queryAllTree, removeMenuAllById, updateMenuById } from '@/api/ApiSystemMenu'
import SystemMenuChangeDTO from '@/api/entity/SystemMenuChangeDTO'

export default {
  name: 'pageMenuWrapper',
  components: { MenuDialog, XumTitle },
  data () {
    return {
      queryLoading: false,
      submitLoading: false,
      treeData: [],
      selectNode: {
        menuId: '',
        menuCode: '',
        menuName: '',
        menuIcon: '',
        menuUrl: '',
        menuOrder: '',
        menuDesc: ''
      },
      formRuler: {
        menuId: [{
          required: true,
          message: '菜单ID不能为空',
          trigger: 'blur'
        }],
        menuCode: [{
          required: true,
          message: '菜单编码不能为空',
          trigger: 'blur'
        }],
        menuName: [{
          required: true,
          message: '菜单名称不能为空',
          trigger: 'blur'
        }],
        menuIcon: [{
          required: true,
          message: '菜单图标不能为空',
          trigger: 'blur'
        }],
        menuUrl: [{
          required: true,
          message: '菜单链接不能为空',
          trigger: 'blur'
        }],
        menuOrder: [{
          required: true,
          message: '菜单排序不能为空',
          trigger: 'blur'
        }],
        menuDesc: [{
          required: true,
          message: '菜单描述不能为空',
          trigger: 'blur'
        }]
      },
      dialogVisible: false,
      parentId: 0
    }
  },
  computed: {
    loading () {
      return this.queryLoading
    },
    isSelect () {
      return this.selectNode && this.selectNode['menuId'] > 0
    }
  },
  methods: {
    /**
       * 树点击
       */
    handleNodeClick (data) {

    },
    /**
       * 更新树
       */
    freshTree () {
      if (this.queryLoading) {
        return
      }
      this.queryLoading = true
      this.initSelect()
      queryAllTree(data => {
        if (data && data.code === ResultCode.OK) {
          data = data.object
          this.treeData = data
        }
      }, () => {
        this.queryLoading = false
      })
    },
    initSelect () {
      this.selectNode = {
        menuId: '',
        menuCode: '',
        menuName: '',
        menuIcon: '',
        menuUrl: '',
        menuOrder: '',
        menuDesc: ''
      }
    },
    /**
       * 刷新按钮点击事件
       */
    handleRefreshTree () {
      this.freshTree()
    },
    /**
       * 树当前选择节点改变
       * @param data 当前节点数据
       */
    currentChange (data) {
      this.selectNode = data
    },
    /**
       * 更新商品分数信息
       */
    handleChangeGoodGroup () {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (!this.selectNode['menuId'] || this.selectNode['menuId'] < 0) {
            return
          }
          this.submitLoading = true
          const params = Object.assign(SystemMenuChangeDTO.instance(), this.selectNode)
          params.parentMenuId = undefined
          params.menuCode = undefined
          updateMenuById([params], data => {
            if (data && data.code === ResultCode.OK) {
              this.$message.success('更新数据成功')
              this.freshTree()
            }
          }, () => {
            this.submitLoading = false
          })
        }
      })
    },
    /**
       * 添加跟节点
       */
    handleAddRootNode () {
      this.parentId = 0
      this.dialogVisible = true
    },
    /**
       * 添加子节点
       */
    addSonNode (data) {
      this.parentId = data.menuId
      this.dialogVisible = true
    },
    /**
       * 移除当前节点
       * @param node 节点信息
       * @param data 当前节点数据，自己的数据
       */
    removeNode (node, data) {
      this.$confirm('你正在执行删除菜单操作, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (data && data.menuId) {
          const id = data.menuId
          this.submitLoading = true
          removeMenuAllById(id, data => {
            if (data && data.code === ResultCode.OK) {
              this.$message.success('移除成功')
              this.freshTree()
            }
          }, () => {
            this.submitLoading = false
          })
        }
      }).catch(() => {
      })
    }
  },
  mounted () {
    this.freshTree()
  }
}
</script>

<style scoped lang="scss">
  .pageMenuWrapper{
    .card{
      height: 580px;
      .menuTitle {
        margin-bottom: -10px;
        margin-top: -7px;
        line-height: 220%;
      }
    }

    .form{
      padding: 8px 20px;
    }

    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 18px;
    }
  }
</style>
